<template>
	<view class="confirmlnfo">
		<confirmlnfoDetail :list="Data.list"></confirmlnfoDetail>
		<confirmlnfoBreakdown></confirmlnfoBreakdown>
		<view class="confirmlnfoPay">
			<view>
				<text>支付方式</text>
				<text>余额</text>
			</view>
			<view>
				<view>
					<text>卡内余额</text>
					<text>{{topStore.swit.money||0}}.00元</text>
				</view>
				<view @click="goOnine">
					<text>去充值</text>
					<text>></text>
				</view>
			</view>
		</view>
		<view class="confirmlnfoTotal">
			<view>
				<text>
					合计：
					<text>{{topStore.swit.item.fee||0}}.00</text>
				</text>
			</view>
			<view @click="goaymPentInformation"><text>扣款缴费</text></view>
		</view>
	</view>
</template>

<script setup>
	import confirmlnfoDetail from '@/pages/selfPayment/confirmInfo/confirmlnfoDetail.vue'
	import confirmlnfoBreakdown from '@/pages/selfPayment/confirmInfo/confirmlnfoBreakdown.vue'
	import {
		reactive,
		onMounted
	} from 'vue';
	import {
		selfpayPay
	} from '@/api/TopUpService.js'
	import {
		useTopStore
	} from '@/store/TopUpService.js'
	const topStore = useTopStore();

	const Data = reactive({
		list: [{
				key: '费用类型',
				value: topStore.swit.item.feeType || ''
			},
			{
				key: '就诊科室',
				value: topStore.swit.item.department || ''
			},
			{
				key: '医生姓名',
				value: topStore.swit.item.doctorName || ''
			},
			{
				key: '就 诊 人',
				value: topStore.swit.name || ''
			},
			{
				key: '就诊卡号',
				value: topStore.swit.visitNum || ''
			}
		]
	})
	const goOnine = () => {
		uni.navigateTo({
			url: `/pages/TopUpOnline/OutpatientTopUp/OutpatientTopUp?id=${topStore.swit.id}`
		})
	}
	const selfpay = (fun) => {
		selfpayPay({
			id: topStore.swit.id,
			appointId: topStore.swit.item.registerId,
			orderMoney: topStore.swit.item.fee
		}).then(({
			data
		}) => {
			console.log(data)
			fun && fun(data)
		}).catch(err => {
			console.log(err)
		})
	}
	const goaymPentInformation = () => {
		if (topStore.swit.item.fee > topStore.swit.money) {
			uni.showToast({
				title: '余额不足，请充值',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		selfpay((v) => {
			if (v.msg == 'success') {
				uni.navigateTo({
					url: `/pages/selfPayment/paymentInformation/paymentInformation?orderId=${v.data}`
				})
			} else {
				uni.showToast({
					title: '缴费失败',
					duration: 2000,
					icon: 'error'
				});
			}
		});
	}
	onMounted(() => {})
</script>

<style lang="less" scoped>
	.confirmlnfo {
		width: 750rpx;
		background-color: #fdfeff;
		color: #323232;
		position: relative;

		.confirmlnfoPay {
			width: 680rpx;
			margin: 25rpx auto;
			background-color: #fff;
			border-radius: 10rpx;
			border: 1px solid #f5f4f5;
			padding: 0 30rpx;
			box-sizing: border-box;

			&>view {
				width: 100%;
				height: 112rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f3f3f3;
				font-size: 30rpx;
				font-weight: 600;

				text:first-child {
					font-size: 28rpx;
					color: #aaaaaa;
					margin-right: 18rpx;
				}

				&:last-child {
					border-bottom: none;
				}
			}

			&>view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #aaaaaa;

				&>view:nth-child(1) {
					&>text:nth-child(2) {
						color: #232323;
					}
				}

				view:nth-child(2) {
					text:first-child {
						color: #0f73ff;
					}
				}
			}
		}

		.confirmlnfoTotal {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;

			view {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;
				font-size: 30rpx;

				&:nth-child(1) {
					text {
						font-size: 25rpx;

						text {
							color: #f35a58;
							font-size: 30rpx;
						}
					}
				}

				&:nth-child(2) {
					background-color: #006eff;
					color: #fff;
				}
			}
		}
	}
</style>
